<template>
  <section class="profile">
    <HeaderTop title="我的"/>
    <section class="profile-number">
      <router-link :to="useInfo._id? '/useinfo':'/login'" class="profile-link">
        <div class="profile_image">
          <i class="iconfont icon-geren" style="font-size: 60px ;color: burlywood"></i>
        </div>
        <div class="user-info">
          <p class="user-info-top" v-if="!useInfo.phone">{{ useInfo.name || '登录/注册' }}</p>
          <p>
                <span class="user-icon">
                  <i class="iconfont icon-shouji" style="margin: 10px; font-size: 30px"></i>
                </span>
            <span class="icon-mobile-number">{{ useInfo.phone || '暂无绑定手机号' }}</span>
          </p>
        </div>
        <span class="arrow">
              <i class="iconfont icon-iov-back" style="margin: -20px; color: white"></i>
            </span>
      </router-link>
    </section>
    <section class="profile_info_data border-1px">
      <ul class="info_data_list">
        <a href="javascript:" class="info_data_link">
          <span class="info_data_top"><span>0.00</span>元</span>
          <span class="info_data_bottom">我的余额</span>
        </a>
        <a href="javascript:" class="info_data_link">
          <span class="info_data_top"><span>0</span>个</span>
          <span class="info_data_bottom">我的优惠</span>
        </a>
        <a href="javascript:" class="info_data_link">
          <span class="info_data_top"><span>0</span>分</span>
          <span class="info_data_bottom">我的积分</span>
        </a>
      </ul>
    </section>
    <section class="profile_my_order border-1px">
      <!-- 我的订单 -->
      <a href='javascript:' class="my_order">
            <span>
              <i class="iconfont icon-dingdan" style="color: chocolate"></i>
            </span>
        <div class="my_order_div">
          <span>我的订单</span>
          <span class="my_order_icon">
                <i class="iconfont icon-iov-back-copy"></i>
              </span>
        </div>
      </a>
      <!-- 积分商城 -->
      <a href='javascript:' class="my_order">
            <span>
              <i class="iconfont icon-jia" style="color: #3ae21d"></i>
            </span>
        <div class="my_order_div">
          <span>积分商城</span>
          <span class="my_order_icon">
                <i class="iconfont icon-iov-back-copy"></i>
              </span>
        </div>
      </a>
      <!-- 硅谷外卖会员卡 -->
      <a href="javascript:" class="my_order">
            <span>
              <i class="iconfont icon-huiyuanzhongxin " style="color: chocolate"></i>
            </span>
        <div class="my_order_div">
          <span>硅谷外卖会员卡</span>
          <span class="my_order_icon">
                <i class="iconfont icon-iov-back-copy"></i>
              </span>
        </div>
      </a>
    </section>
    <section class="profile_my_order border-1px">
      <!-- 服务中心 -->
      <a href="javascript:" class="my_order">
            <span>
              <i class="iconfont icon-240" style="color: #300eee"></i>
            </span>
        <div class="my_order_div">
          <span>服务中心</span>
          <span class="my_order_icon">
                <i class="iconfont icon-iov-back-copy"></i>
              </span>
        </div>
      </a>
    </section>
    <section class="profile_my_order border-1px" v-if="useInfo._id">
      <mt-button class="logout" type="danger" style="width: 100%" @click="logout">退出登陆</mt-button>
    </section>
  </section>
</template>

<script>
import {mapState} from 'vuex'
import {MessageBox} from 'mint-ui'
// 引入头部总体结构
import HeaderTop from '../../components/headerTop/headerTop'
import actions from '../../store/actions'

export default {
  computed: {
    ...mapState(['useInfo'])
  },
  components: {
    HeaderTop
  },
  methods: {
    logout () {
      MessageBox.confirm(' 确定退出登陆吗?').then(actions => {
        this.$store.dispatch('logout')
      })
    }
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
@import "../../common/stylus/mixins.styl"

.profile //我的
  width 100%
  height: 1000px;
  overflow-y: scroll;

  .header
    background-color #02a774
    position fixed
    z-index 100
    left 0
    top 0
    width 100%
    height 45px

    .header_search
      position absolute
      left 15px
      top 50%
      transform translateY(-50%)
      width 10%
      height 50%

      .icon-sousuo
        font-size 25px
        color #fff

    .header_title
      position absolute
      top 50%
      left 50%
      transform translate(-50%, -50%)
      width 50%
      color #fff
      text-align center

      .header_title_text
        font-size 20px
        color #fff
        display block

      .ellipsis
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;


    .header_login
      font-size 14px
      color #fff
      position absolute
      right 15px
      top 50%
      transform translateY(-50%)

      .header_login_text
        color #fff

  .profile-number
    margin-top 45.5px

    .profile-link
      clearFix()
      width 100%
      position relative
      display block
      background #02a774
      padding 40px 10px
      border-top 2px solid #3fcece

      .profile_image
        float left
        width 60px
        height 60px
        border-radius 50%
        overflow hidden
        vertical-align top

        .icon-person
          background #e4e4e4
          font-size 62px

      .user-info
        float left
        margin-top 8px
        margin-left 15px

        p
          font-weight: 700
          font-size 18px
          color #fff

          &.user-info-top
            margin 0px 0px 5px 30px
            color brown
            font-size 20px

          .user-icon
            display inline-block
            margin-left -15px
            width 20px
            height 20px

            .icon-mobile
              font-size 30px
              vertical-align text-top

          .icon-mobile-number
            font-size 25px
            margin 0px 0px 5px 6px
            padding 14px
            color brown


      .arrow
        width 12px
        height 12px
        position absolute
        right 15px
        top 40%

        .icon-jiantou1
          color #fff
          font-size 5px

  .profile_info_data
    bottom-border-1px(#e4e4e4)
    width 100%
    background #fff
    overflow hidden

    .info_data_list
      clearFix()
      padding 0 0 0 0

      .info_data_link
        float left
        width 33%
        text-align center
        border-right 1px solid #f1f1f1
        text-decoration none

        .info_data_top
          display block
          width 100%
          font-size 14px
          color #333
          padding 15px 5px 10px

          span
            display inline-block
            font-size 30px
            color #f90
            font-weight 700
            line-height 30px

        .info_data_bottom
          display inline-block
          font-size 14px
          color #666
          font-weight 400
          padding-bottom 10px

      .info_data_link:nth-of-type(2)
        .info_data_top
          span
            color #ff5f3e

      .info_data_link:nth-of-type(3)
        border 0

        .info_data_top
          span
            color #6ac20b

  .profile_my_order
    top-border-1px(#e4e4e4)
    margin-top 10px
    background #fff

    .my_order
      display flex
      align-items center
      padding-left 15px
      text-decoration none

      > span
        display flex
        align-items center
        padding 15px
        width 20px
        height 20px

        > .iconfont
          margin-left -10px
          font-size 25px

        .icon-order-s
          color #02a774

        .icon-jifen
          color #ff5f3e

        .icon-vip
          color #f90

        .icon-fuwu
          color #02a774

      .my_order_div
        width 100%
        border-bottom 1px solid #f1f1f1
        padding 18px 10px 18px 0
        font-size 16px
        color #333
        display flex
        justify-content space-between

        span
          display block

        .my_order_icon
          width 10px
          height 10px

          .icon-jiantou1
            color #bbb
            font-size 10px
</style>
